<template>
  <div class="statistics-container">
    <custom-title :is-line="true" title="基本信息" />
    <div class="base-info-statistics">
      <div v-for="(item, index) in descList" :key="index + 'base'">
        <custom-details-item :icon="item.icon" :label="item.label">
          <template #valueSlot>
            <template v-if="item.field ==='checkTaskAttachList'">
              <div v-if="Array.isArray(item.value)">
                <el-link type="primary" @click="openAttachPopUp(item.value)">查看</el-link>
              </div>
            </template>
            <template v-else-if="item.field === 'checkPersonList'">
              <span v-for="it in item.value" :key="it.checkTeamId + 'checkPerson'">{{ it.checkTeamName }}（组长：{{ it.expertLeader }}）;</span>
            </template>
            <span v-else>{{ item.value || '/' }}</span>
          </template>
        </custom-details-item>
      </div>
    </div>
    <div class="d-flex mt-2 w-100">
      <custom-radio-tag1 class="mb-1 w-100" :list="listRadio" :check-value.sync="checkRadio" is-scroll @change="tagChange" />
    </div>
    <template v-if="false">
      <custom-title :is-line="true" title="隐患数量概览" />
      <ul class="stasticBox">
        <li v-for="it, ind in stasticData" :key="ind">
          <div class="iconBox">
            <i class="iconfont" v-html="it.icon" />
          </div>
          <div class="numBox">
            <h3 class="name">{{ it.name }}</h3>
            <b>{{ it.value }}</b>
          </div>
        </li>
      </ul>
    </template>
    <customTitle :is-line="true" bg-color="#3795ff" title="隐患类别分析" />
    <div ref="barChart" class="barChart-area" style="height: 250px;" />
    <customTitle :is-line="true" bg-color="#3795ff" title="企业评分分布" />
    <div ref="pieChart" class="pieChart-area" :style="pieChartStyle" />
    <attachPopUp ref="attachPopUp" file-name-key="attachName" file-url-key="attachUuid" />
  </div>
</template>
<script>
import { lineHorizontalChart, pieChart } from '@/utils/chart'
import { planDangersCheckTaskDetails, dangersNumText, dangersNumDangersType, companyCheckLevel } from '@/api/commonPage/dangerTreatment'
import commonList from '@/assets/mixin/commonList'
export default {
  components: {

  },
  mixins: [commonList],
  data() {
    return {
      descList: [
        { field: 'checkTaskName', label: '检查计划名称', icon: '&#xe62c;', value: '' },
        { field: 'years', label: '所属年份', icon: '&#xe8d5;', value: '' },
        { field: 'checkType', label: '检查类型', icon: '&#xe6aa;', value: '' },
        { field: 'checkTime', label: '计划检查日期', icon: '&#xe617;', value: '' },
        { field: 'issueTime', label: '下发时间', icon: '&#xe685;', value: '' },
        { field: 'checkPersonList', label: '检查组', icon: '&#xe700;', value: [] },
        { field: 'taskScheduleDesc', label: '任务完成进度', icon: '&#xe64d;', value: '' },
        { field: 'checkTaskAttachList', label: '附件', icon: '&#xe677;', value: [] }
      ],
      checkRadio: '',
      listRadio: [],
      pieChartStyle: { height: '250px', textAlign: 'center' },
      stasticData: [
        { name: '审核通过隐患数量', value: '暂无', filedName: 'yhNum', icon: '&#xe611;', unit: '' },
        { name: '已整改隐患数量', value: '暂无', filedName: 'yzgNum', icon: '&#xe873;', unit: '' },
        { name: '未整改隐患数量', value: '暂无', filedName: 'wzgNum', icon: '&#xe67a;', unit: '' },
        { name: '超期未整改隐患数量', value: '暂无', filedName: 'cqWzgNum', icon: '&#xe682;', unit: '' },
        { name: '隐患整改率', value: '暂无', filedName: 'zgl', icon: '&#xe64d;', unit: '%' }
      ]
    }
  },
  computed: {

  },
  mounted() {
    this.dangersCheckTaskDetails()
  },
  methods: {
    loadOther() {
      this.initBarChart()
      this.dangersNumText()
      this.companyCheckLevel()
    },
    async initBarChart() {
      const { data, status } = await dangersNumDangersType({
        checkTaskId: this.$route.query.checkTaskId,
        moduleName: this.checkRadio === '环保节能' ? '环保' : this.checkRadio
      })
      const dataY = []
      const yzgArr = []
      const wzgArr = []
      if (status === 0 && data) {
        data.map(v => {
          dataY.push(v.typename)
          yzgArr.push(v.yzgnum)
          wzgArr.push(v.wzgnum)
        })
      }
      const dataSeries = [{
        name: '已整改',
        type: 'bar',
        stack: 1,
        data: yzgArr,
        itemStyleColor: '#6a99f9'
      }, {
        name: '未整改',
        type: 'bar',
        stack: 1,
        data: wzgArr,
        itemStyleColor: '#ccdfff'
      }
      ]
      const params = {
        tooltipShow: true,
        legendShow: true,
        gridRight: '5%',
        // gridTop: '12%',
        // gridLeft: '0%',
        gridBottom: '12%',
        legendBottom: 2,
        xMinInterval: 1
      }
      const chart = this.$refs.barChart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        myChart.setOption(lineHorizontalChart(dataY, dataSeries, params))
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      }
      this.layout.hideAreaLoading(['.barChart-area'])
    },
    initPieChart(arr) {
      const colorList = ['rgba(99,149,250,1)', 'rgba(98,218,171,1)', 'rgba(101,119,152,1)', 'rgba(247,193,34,1)', 'rgba(111,94,249,1)', 'rgba(109,200,236,1)', 'rgba(148,95,185,1)']
      // [
      //   { name: 'A+', num: 5 },
      //   { name: 'A', num: 9 },
      //   { name: 'A-', num: 11 },
      //   { name: 'B+', num: 11 },
      //   { name: 'B', num: 11 },
      //   { name: 'B-', num: 11 },
      //   { name: 'C', num: 11 }
      // ]
      let total = 0
      arr.forEach((v) => {
        total += Number(v.num)
      })
      arr.forEach(v => {
        v.percent = ((Number(v.num) / total) * 100) === 100 ? 100 : ((Number(v.num) / total) * 100).toFixed(2)
      })
      const dataList = arr.map((v, i) => {
        return {
          value: v.num,
          name: v.typename,
          itemStyle: { color: colorList[i] },
          label: { color: '#fff', position: 'outside' }
        }
      })
      const dataSeries = [
        {
          radius: ['30%', '60%'],
          center: ['24%', '50%'],
          data: dataList,
          label: {
            show: false
          }
        }
      ]
      const params = {
        tooltipShow: true,
        legendShow: true,
        legendOrient: 'vertical',
        legendRight: 20,
        legendTop: 'middle',
        titleShow: false,
        titleText: '', // total
        titleX: '21%',
        titleY: '45%',
        titleColor: '#333',
        tooltipFormatter: '{b}：{c}（{d}%）',
        legendFormatter: (params) => {
          let returnTemp = ''
          arr.forEach((v) => {
            if (v.typename === params) {
              returnTemp = v.typename + ' ' + '企业数量' + ' ' + v.num + ' ' + v.percent + '%'
            }
          })
          return returnTemp
        }
      }
      const chart = this.$refs.pieChart
      if (chart) {
        if (arr.length > 0) {
          const myChart = this.$echarts.init(chart)
          myChart.setOption(pieChart(params, dataSeries), true)
          window.addEventListener('resize', () => {
            myChart.resize()
          })
        } else {
          this.pieChartStyle = { height: '250px', textAlign: 'center' }
          this.layout.chartNoData(chart)
          // chart.removeAttribute('_echarts_instance_')
          // chart.innerHTML = '暂无数据'
        }
      }
    },
    // 基本信息
    async dangersCheckTaskDetails() {
      this.layout.showAreaLoading(['.base-info-statistics'])
      this.layout.showAreaLoading(['.pieChart-area'])
      this.layout.showAreaLoading(['.barChart-area'])
      const { data, status } = await planDangersCheckTaskDetails({
        checkTaskId: this.$route.query.checkTaskId
      })
      if (status === 0 && data) {
        this.descList.forEach(v => {
          if (v.field === 'checkPersonList' || v.field === 'checkTaskAttachList') {
            v.value = data[v.field] ? data[v.field] : []
          } else {
            v.value = data[v.field] ? data[v.field] : '/'
          }
        })
        const listRadio = []
        data.checkContentList.forEach((x, index) => {
          if (!listRadio.find(val => val.label === x.moduleName)) {
            listRadio.push({
              label: x.moduleName,
              value: index
            })
          }
        })
        this.listRadio = listRadio
        this.checkRadio = this.listRadio[0].label
        this.loadOther()
        this.layout.hideAreaLoading(['.base-info-statistics'])
        if (data.checkContentList.length === 0) {
          this.layout.hideAreaLoading(['.pieChart-area'])
          this.layout.hideAreaLoading(['.barChart-area'])
        }
      }
    },
    async dangersNumText() {
      const { status, data } = await dangersNumText({
        checkTaskId: this.$route.query.checkTaskId,
        moduleName: this.checkRadio === '环保节能' ? '环保' : this.checkRadio
      })
      if (status === 0 && data) {
        this.stasticData.forEach(v => {
          v.value = data[v.filedName] !== '' ? data[v.filedName] + v.unit : '暂无'
        })
      }
    },
    async companyCheckLevel() {
      const { status, data } = await companyCheckLevel({
        checkTaskId: this.$route.query.checkTaskId,
        moduleName: this.checkRadio === '环保节能' ? '环保' : this.checkRadio
      })
      if (status === 0 && data) {
        this.initPieChart(data)
      }
      this.layout.hideAreaLoading(['.pieChart-area'])
    },
    tagChange(info) {
      this.checkRadio = info.item.label
      this.loadOther()
    }
  }
}
</script>
<style scoped lang="scss">
.statistics-container{
min-height: 120vh;

.stasticBox {
      display: flex;
      margin-top: 10px;
      flex-wrap: wrap;
      li {
        min-width: 32%;
        flex: 1;
        margin-right: 2%;
        margin-bottom: .2rem;
        background-image: linear-gradient(-40deg, #4676f3 0%,  #62beff 100%),
        linear-gradient(#eff4fc, #eff4fc);
        background-blend-mode: normal, normal;
        border-radius: 5px;
        padding: 20px 10px;
        align-items: center;
        &:last-child {
          margin-right: 0;
        }
        &:nth-child(3n+3) {
          margin-right: 0;
        }
        &:nth-child(2) {
          background-image: linear-gradient(-40deg, #606eef 0%,#91a0ff 100%),
          linear-gradient( #eff4fc, #eff4fc);
          background-blend-mode: normal, normal;
          .iconBox {
            .iconfont {
              color: #606eef;
            }
          }
        }
        &:nth-child(3) {
          background-image: linear-gradient(-40deg, #f4b111 0%, #f7d650 100%),
          linear-gradient(#eff4fc, #eff4fc);
          background-blend-mode: normal, normal;
          .iconBox {
            .iconfont {
              color: #f4b111;
            }
          }
        }
        .iconBox {
          background-color: rgba(255, 255, 255, 0.6);
          padding: 6px;
          border-radius: 50%;
          width: 72px;
          height: 72px;
          margin: 0 auto;
          .iconfont {
            width: 60px;
            height: 60px;
            display: inline-block;
            text-align: center;
            line-height: 60px;
            background-color: #ffffff;
            color: #62beff;
            font-size: 0.533rem;
            border-radius: 50%;
          }
        }
        .numBox {
          color: #fff;
          margin-top: 20px;
          text-align: center;
          h3 {
            font-size: 12px;
            line-height: 0.427rem;
          }
          b {
            font-size: 0.373rem;
            font-weight: bold;
            line-height: 0.533rem;
          }
        }
      }
    }

}

</style>
